<template>
  <view class="content">
    <uni-nav-bar 
      title="uni-ui完整示例" 
      left-icon="back" 
      right-icon="more"
      @clickLeft="handleBack"
      @clickRight="handleMore"
      fixed 
      placeholder>
    </uni-nav-bar>
    
    <view class="container">
      <!-- 卡片组件 -->
      <uni-card title="卡片标题" subTitle="副标题" extra="额外信息" :cover="coverImage">
        <text>这是卡片内容区域，可以放置任何内容。</text>
      </uni-card>
      
      <!-- 步骤条 -->
      <uni-section title="步骤条" type="line">
        <uni-steps :options="stepsOptions" :active="activeStep"></uni-steps>
        <view class="step-controls">
          <button size="mini" @click="prevStep">上一步</button>
          <button size="mini" @click="nextStep">下一步</button>
        </view>
      </uni-section>
      
      <!-- 分段器 -->
      <uni-section title="分段器" type="line">
        <uni-segmented-control 
          :current="currentTab" 
          :values="tabItems" 
          @clickItem="changeTab"
          style="margin-bottom: 20rpx;">
        </uni-segmented-control>
        <view class="tab-content">
          <text v-if="currentTab === 0">标签1的内容</text>
          <text v-else-if="currentTab === 1">标签2的内容</text>
          <text v-else-if="currentTab === 2">标签3的内容</text>
        </view>
      </uni-section>
      
      <!-- 评分组件 -->
      <uni-section title="评分组件" type="line">
        <view class="rate-container">
          <text>评分：</text>
          <uni-rate v-model="rateValue" @change="onRateChange"></uni-rate>
          <text>{{ rateValue }}星</text>
        </view>
      </uni-section>
      
      <!-- 数字输入框 -->
      <uni-section title="数字输入框" type="line">
        <view class="number-box-container">
          <uni-number-box 
            v-model="numberValue" 
            :min="0" 
            :max="100" 
            @change="onNumberChange">
          </uni-number-box>
          <text>当前值：{{ numberValue }}</text>
        </view>
      </uni-section>
      
      <!-- 搜索栏 -->
      <uni-section title="搜索栏" type="line">
        <uni-search-bar 
          v-model="searchValue" 
          @confirm="onSearch"
          @clear="onClear"
          placeholder="请输入搜索内容">
        </uni-search-bar>
      </uni-section>
      
      <!-- 进度条 -->
      <uni-section title="进度条" type="line">
        <view class="progress-container">
          <progress 
            :percent="progressPercent" 
            show-info 
            stroke-width="10"
            activeColor="#007aff"
            backgroundColor="#f0f0f0"
            style="width: 100%; margin-bottom: 20rpx;">
          </progress>
          <button size="mini" @click="increaseProgress">增加进度</button>
        </view>
      </uni-section>
      
      <!-- 提示信息 -->
      <uni-section title="提示信息" type="line">
        <view class="notice-container">
          <uni-notice-bar 
            text="这是一条滚动通知信息，用于展示重要提示内容" 
            scrollable>
          </uni-notice-bar>
        </view>
      </uni-section>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 导入uni-ui组件
import uniNavBar from '@dcloudio/uni-ui/lib/uni-nav-bar/uni-nav-bar.vue'
import uniCard from '@dcloudio/uni-ui/lib/uni-card/uni-card.vue'
import uniSection from '@dcloudio/uni-ui/lib/uni-section/uni-section.vue'
import uniSteps from '@dcloudio/uni-ui/lib/uni-steps/uni-steps.vue'
import uniSegmentedControl from '@dcloudio/uni-ui/lib/uni-segmented-control/uni-segmented-control.vue'
import uniRate from '@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue'
import uniNumberBox from '@dcloudio/uni-ui/lib/uni-number-box/uni-number-box.vue'
import uniSearchBar from '@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue'
import uniNoticeBar from '@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue'

// 响应式数据
const coverImage = ref('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png')
const activeStep = ref(1)
const currentTab = ref(0)
const rateValue = ref(3)
const numberValue = ref(5)
const searchValue = ref('')
const progressPercent = ref(30)

// 分段器选项
const tabItems = ref(['标签1', '标签2', '标签3'])

// 步骤条选项
const stepsOptions = ref([
  { title: '步骤1' },
  { title: '步骤2' },
  { title: '步骤3' },
  { title: '步骤4' }
])

// 方法
const handleBack = () => {
  uni.navigateBack()
}

const handleMore = () => {
  uni.showToast({
    title: '点击了更多按钮',
    icon: 'none'
  })
}

const prevStep = () => {
  if (activeStep.value > 0) {
    activeStep.value--
  }
}

const nextStep = () => {
  if (activeStep.value < stepsOptions.value.length - 1) {
    activeStep.value++
  }
}

const changeTab = (e) => {
  currentTab.value = e.currentIndex
}

const onRateChange = (e) => {
  rateValue.value = e.value
  uni.showToast({
    title: `评分：${e.value}星`,
    icon: 'none'
  })
}

const onNumberChange = (value) => {
  numberValue.value = value
  uni.showToast({
    title: `数字：${value}`,
    icon: 'none'
  })
}

const onSearch = (e) => {
  uni.showToast({
    title: `搜索：${e.value}`,
    icon: 'none'
  })
}

const onClear = () => {
  searchValue.value = ''
  uni.showToast({
    title: '已清空搜索内容',
    icon: 'none'
  })
}

const increaseProgress = () => {
  progressPercent.value = Math.min(100, progressPercent.value + 10)
}
</script>

<style scoped>
.content {
  padding: 20rpx;
}

.container {
  padding-top: var(--status-bar-height);
}

.step-controls {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-top: 20rpx;
}

.tab-content {
  padding: 30rpx;
  text-align: center;
  min-height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rate-container {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.number-box-container {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.progress-container {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.notice-container {
  margin: 20rpx 0;
}
</style>